import React, { useState, useEffect } from "react";
import InterTime from "@/components/InterTime";
import { getCurrentInstance, useReachBottom } from '@tarojs/taro'
import { toast, CopyToClipboard } from '@/utils/utils'
import { View, Text, Button } from '@tarojs/components'
import { fetchOrderDetail } from '@/server/order';
import { loginData } from '@/utils/utils'
import Router from '@/utils/router';
import ExpressTemplate from "./components/expressTemplate";
import "./index.scss";
const OrderDetail = (props) => {
  const { params } = getCurrentInstance().router

  const { orderSn } = params;
  const [data, setData] = useState({});
  const [visible, setVisible] = useState(false)
  const account = loginData() || {}
  const { username, unionId, openId, organizationId, profile } = account
  const fetchData = () => {
    fetchOrderDetail({ orderSn, organizationId }).then(val => {
      const { orderInfo } = val
      setData(orderInfo)
    })
  }
  useEffect(() => {
    fetchData()
  }, [])
  const {
    beanFee,
    createTime,
    orderDesc = "[]",
    payFee,
    totalFee = 0,
    refusedFlag,
    status,
    payTime,
    paySn,
    payType,
    refusedTime,
    refusedSn,
    orderType,
    expressRecord = '',
    goodsAmount
  } = data;
  let desc = JSON.parse(orderDesc) || [];
  const { goodsName } = desc
  const orderStatus = {
    0: (
      <View className="orderDetails_logo_title">
        <View className="orderDetails_error"></View>
        <View className="orderDetails_titleName">
          待付款
          <Text className="orderDetails_time_info">
            剩余
            <InterTime
              fn={() => fetchData()}
              times={createTime}
            ></InterTime>
            自动关闭
          </Text>
        </View>
      </View>
    ),
    1: (
      <View className="orderDetails_logo_title">
        <View className="orderDetails_success"></View>
        <View className="orderDetails_titleName">支付完成</View>
      </View>
    ),
    2: (
      <View className="orderDetails_logo_title">
        <View className="orderDetails_error"></View>
        <View className="orderDetails_titleName">
          {refusedFlag === "1" ? "已退款" : "交易已关闭"}
        </View>
      </View>
    ),
    3: (
      <View className="orderDetails_logo_title">
        <View className="orderDetails_success"></View>
        <View className="orderDetails_titleName">交易完成</View>
        <View className="orderDetails_btn_init"></View>
      </View>
    )
  }[status];
  const filterStyle = (str = "wx_lite") => {
    switch (str) {
      case "wechat":
        return "微信支付";
      case "wechat":
        return "微信支付";
      case "alipay":
        return "支付宝支付";
      case "beanPay":
        return "卡豆支付";
    }
  };
  const templateList = [
    {
      label: "订单号码",
      value: orderSn,
      fn: true
    },

    { label: "创建时间", value: createTime },
    { label: "支付时间", show: status !== "0", value: payTime },
    {
      label: "支付方式",
      show: status !== "0",
      value: filterStyle(payType),
      type: "pay"
    },
    { label: "支付流水号", show: status !== "0", value: paySn }
  ];
  const templateList1 = [
    { label: "退款时间", value: refusedTime },
    { label: "支付方式", value: filterStyle(payType), type: "pay" },
    { label: "退款流水号", value: refusedSn }
  ];

  return (
    <View className="orderDetails_box">
      {orderStatus}
      {(status === "1" || status === "3") && (orderType === 'videoCourse' || orderType === 'directLive' || orderType === 'liveCourse') && (
        <View className="orderDetails_member_box">
          进入课程中心查看{" "}
          <View
            onClick={() => {
              Router('course')
            }}
            className="orderDetails_btn_init"
          >
            立即进入
          </View>
        </View>
      )}
      <View className="orderDetails_list">
        <View className="orderDetails_title">
          <View className="orderDetails_name">商品</View>
          <View className="orderDetails_count">数量</View>
        </View>
        <View className="orderDetails_content">
          <View className="orderDetails_list_content">
            <View className="orderDetails_name orderDetails_nameStyle">
              {goodsName}
            </View>
            <View className="orderDetails_count">x {goodsAmount} </View>
          </View>
        </View>
        {beanFee && beanFee > 0 ? (
          <View className="orderDetails_all">
            <View className="orderDetails_all_label">融豆</View>
            <View className="orderDetails_all_price orderDetails_all_priceColor1">
              {beanFee}
            </View>
          </View>
        ) : null}
        {status === "1" || status === "3" || status === "0" ? (
          <View className="orderDetails_all">
            <View className="orderDetails_all_label">实付</View>
            <View className="orderDetails_all_price orderDetails_all_priceColor2">
              {payFee}
            </View>
          </View>
        ) : null}
        {status === "2" && refusedFlag === "1" ? (
          <View className="orderDetails_all">
            <View className="orderDetails_all_label">退款</View>
            <View className="orderDetails_all_price orderDetails_all_priceColor2">
              {payFee}
            </View>
          </View>
        ) : null}
      </View>

      <View className="orderDetails_card">
        {templateList.map(item => {
          const { label, value, fn, type, show = true } = item;
          if (!show) {
            return null;
          }
          if (fn) {
            return (
              <View className="font24 public_auto orderDetails_cardHeight">
                <View className="orderDetails_card_label">{label}</View>
                <View
                  className="font24 orderDetails_card_value flex_center"
                >
                  <Text className="color1">{value}</Text>
                  <Text className="orderDetails_cardliner"></Text>
                  <Text className="color4" onClick={() => CopyToClipboard(orderSn)}>复制</Text>
                </View>
              </View>
            );
          } else {
            return (
              <View className="public_auto orderDetails_cardHeight">
                <View className="orderDetails_card_label">{label}</View>
                <View className="orderDetails_card_value"> {value}</View>
              </View>
            );
          }
        })}
      </View>
      {status === "2" && refusedFlag === "1" && (
        <View className="orderDetails_card">
          {templateList1.map(item => {
            const { label, value } = item;

            return (
              <View className="public_auto orderDetails_cardHeight">
                <View className="orderDetails_card_label">{label}</View>
                <View className="orderDetails_card_value"> {value}</View>
              </View>
            );
          })}
        </View>
      )}
      {status === "0" && (
        <View
          onClick={() => {
            Router('orderWeex', {
              args: { orderSn }
            })
          }}
          className="orderDetails_pay_btn"
        >
          去付款
        </View>
      )}
      {orderType !== 'offline' && <View className="orderDetails_bottom_desc">
        虚拟服务产品，支付后不支持退款
      </View>}
      {expressRecord.length > 0 && <Button style={{ margin: '24px auto', display: 'block' }} onClick={() => {
        setVisible({
          show: true,
          detail: data
        })
      }} color="primary">查看物流</Button>}
      <ExpressTemplate visible={visible} onClose={() => setVisible(false)}></ExpressTemplate>
    </View>
  );
};
export default OrderDetail